<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        .box{
            width: 680px;
            height:670px;
            background-color: #fafafa;
            margin: auto;
            overflow: hidden;
            padding: 6px;;
        }
        .zhuce{
            border-left: 3px solid #59AFE4 ;
            margin-bottom: 15px;
        }
        .p1{
            font-size: 18px;
            color: #616161;
            padding-left: 3px;
            font-family: "微软雅黑";
            border-bottom: 1px solid #DDDDDD;
        }
        .tongyi{
            font-size: 15px;
            color: #333333;
        }
        .pe{
            position: absolute;
            display: none;
            top: 20%;
            left: 60%;
        }
        .pe1{
            display: none;
        }
        #ico1{
            display: none;
        }
        .ico2-1{
            position: absolute;
            top: 20%;
            left: 60%;
            display:none;
        }
        .text{
           width: 300px;
            height: 34px;
            border: 1px solid #C0D0D8;
            background-color: #F3F9FC;
            border-radius: 3px;
        }
        .box-1{
            position: relative;
            margin-left: 98px;
            margin-bottom: 15px;
        }
        .box-2{
            position: relative;
            margin-left: 98px;
            margin-bottom: 15px;
        }
        .Passwordbox{
             position: absolute;
            display: none;
             top: -15%;
             left: 60%;
         }
        #e-mark1{
            position: relative;
            left: 0;
            top:1.1%;
        }
        #e-mark2{
            position: relative;
            left:0;
            top: 1.1%;
        }
        #e-mark3{
            position: relative;
            left:0;
            top: 1.1%;
        }
        #error1{
            display: none;
        }
        #error2{
            display: none;
        }
        #error3{
            display: none;
        }
        #length{
            display: none;
        }
        #Space{
            display: none;
        }
        #Puredigital{
            display: none;
        }
        .box-3{
            margin-left: 68px;
            margin-bottom: 15px;
            position: relative;
        }
        #qrmm-img1{
            position: absolute;
            display: none;
            top: 20%;
            left: 62%;
        }
        #qrmm-img2{
            display: none;
        }
        #qr1{
            position: absolute;
            display: none;
            top: 20%;
            left: 62%;
        }
        #qr2{
            display: none;
        }
         .box-3a{
            position: absolute;
             top: 15%;
             left: 62%;
        }
        .box-4{
            margin-left: 98px;
            margin-bottom: 20px;
        }
        .men{
            color: #84A8C8;
        }
        .box-5{
            margin-left: 98px;
            margin-bottom: 20px;
        }
        .select1{
            width: 58px;
            height: 23px;
            color: #4199D7;
            border-radius: 2px;
        }

        .box-6{
            margin-left: 83px;
            margin-bottom: 20px;
        }
        .select2{
             width: 102px;
             height: 23px;
            color: #4199D7;
             border-radius: 2px;
         }
        .select3{
            width: 95px;
            height: 23px;
            color: #4199D7;
            border-radius: 2px;
        }
        .box-7{
            margin-left: 68px;
            margin-bottom: 15px;
            position: relative;
        }
        .box-7-1{
            position: absolute;
            top: 15%;
            left: 62%;
            display: none;
         }
        #box-7a{
            position: absolute;
            top: 15%;
            left: 62%;
            display: none;
        }
        .box-8{
            margin-left: 134px;
            margin-bottom: 6px;
            font-size: 12px;
            color: #808080;
        }
        .box-9{
            margin-left: 134px;
            margin-bottom: 15px;
            font-size: 12px;

        }
        .span1{
            color: #808080;
        }
        .span2{
            color: #4199D7;
            cursor: pointer;
        }
        .box-10{
            margin-left: 134px;
            margin-bottom: 27px;
        }
        .huoqu{
            width: 169px;
            height: 34px;
            border: 1px solid #74B4EF;
            border-radius: 2px;
        }
        .note1{
            width: 120px;
            height: 36px;
            border: 1px solid #D0DAE3;
            color: #444444;
            font-size: 15px;
            cursor: pointer;
            outline: none;
            background-color: #F4F9FD;
            font-family: "微软雅黑";
        }
        .box-11{
            margin-left: 134px;
            margin-bottom: 25px;

        }
        .register1{
            width: 306px;
            height: 52px;
            font-size: 23px;
            font-family: "微软雅黑";
            color: #888888;
            border-radius: 3px;
            border: 1px solid #D0DAE3;
            background-color: #F4F9FD;
            cursor: pointer;
        }
        .box-12{
            margin-left: 134px;
            margin-bottom: 8px;
            font-size: 12px;
            color: #333;
        }
        .checkbox{
            vertical-align: middle;
        }
        .box-13_1{
            vertical-align: middle;
        }
        .box-13{
            margin-left: 134px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="zhuce"><p class="p1">注册账号</p></div>
            <div class="box-1">
                <label for="nicheng" class="tongyi">昵称</label>
                <input type="text" id="nicheng" class="text" onfocus="dear()">
                <img src="imgs/ico1.png" alt="haha" id="ico1">
                <span class="pe">请输入昵称</span>
                <div class="ico2-1">
                    <img src="imgs/ico2.png" alt="haha" id="ico2">
                    <span class="pe1">昵称不可以为空</span>
                </div>
            </div>
            <div class="box-2">
                <label for="mima" class="tongyi">密码</label>
                <input type="password" id="mima" class="text" onfocus="passage()" >
                <div class="Passwordbox">
                    <div class="Passwordbox1">
                        <img src="imgs/e-mark.png" alt="haha" id="e-mark1">
                        <img src="imgs/ico1.png" alt="haha" id="error1">
                        <img src="imgs/ico2.png" alt="haha"  id="length">
                        <span id="Passwordbox1-1">长度为6-16个字符</span>
                    </div>
                    <div>
                        <div class="Passwordbox2">
                            <img src="imgs/e-mark.png" alt="haha" id="e-mark2">
                            <img src="imgs/ico1.png" alt="haha" id="error2">
                            <img src="imgs/ico2.png" alt="haha" id="Space">
                            <span id="Passwordbox1-2">不能包含空格</span>
                        </div>
                    </div>
                    <div class="Passwordbox3">
                        <img src="imgs/e-mark.png" alt="haha" id="e-mark3">
                        <img src="imgs/ico2.png" alt="haha" id="Puredigital">
                        <img src="imgs/ico1.png" alt="haha" id="error3">
                        <span id="Passwordbox1-3">不能是9位以下纯数字</span>
                    </div>
                </div>
            </div>
            <div class="box-3">
                <label for="qrmm" class="tongyi" >确认密码</label>
                <input type="password" id="qrmm" class="text" onfocus="qrmm()">
                <img src="imgs/ico1.png" alt="haha" id="qrmm-img1">
                <span id="qr1">请再次输入密码</span>
                <div class="box-3a">
                    <img src="imgs/ico2.png" alt="haha" id="qrmm-img2">
                    <span id="qr2">密码不一致</span>
                </div>

            </div>
            <div class="box-4">
                <span class="tongyi">性别</span>
                <input type="radio" name="dan" >
                <span class="men">男</span>
                <input type="radio" name="dan" >
                <span class="men">女</span>
            </div>
            <div class="box-5">
                <span class="tongyi">生日</span>
                <select name="" id="gong" class="select1">
                    <option value="公历">公历</option>
                    <option value="农历">农历</option>
                </select>
                <select name="" id="year" class="select2">
                    <option value="2002年">2002年</option>
                    <option value="2003年">2003年</option>
                </select>
                </select>
                <select name="" id="mouth" class="select1">
                    <option value="1月">1月</option>
                    <option value="2月">2月</option>
                </select>
                <select name="" id="day" class="select1">
                    <option value="1日">1日</option>
                    <option value="2日">2日</option>
                </select>
            </div>
            <div class="box-6">
                <span class="tongyi">所在地</span>
                <select name="" id="place" class="select3">
                    <option value="中国">中国</option>
                    <option value="安道尔">安道尔</option>
                </select>
                <select name="" id="diming" class="select3">
                    <option value="北京">北京</option>
                    <option value="四川">四川</option>
                </select>
                <select name="" id="xiaodi" class="select3">
                    <option value="成都">成都</option>
                    <option value="遂宁">遂宁</option>
                </select>
            </div>
            <div class="box-7">
                <label for="tel" class="tongyi" >手机号码</label>
                <input type="text" id="tel" class="text" onfocus="tel()">
                <img src="imgs/ico1.png" alt="haha" style="display: none;" id="tel-1">
                <span id="box-7a">请输入手机号码</span>
                <div class="box-7-1">
                    <img src="imgs/ico2.png" alt="hehe" id="tel-3">
                    <span id="box-7b">格式不正确</span>
                </div>
            </div>
            <div class="box-8">可通过该手机号码快速找回密码</div>
            <div class="box-9">
                <span class="span1">中国大陆地区以外手机号码</span>
                <span class="span2">点击这里</span>
            </div>
            <div class="box-10">
                <label for="huoqu"></label>
                <input type="text" id="huoqu" class="huoqu">
                <button class="note1" onclick="sms()">获取短信验证码</button>
            </div>
            <div class="box-11">
                <button class="register1">立即注册</button>
            </div>
            <div class="box-12">
                <input type="checkbox" class="checkbox">
                <span class="box-13_1">同时开通QQ空间</span>
            </div>
            <div class="box-13">
                <input type="checkbox"class="checkbox" onchange="http1()"id="http">
                <span class="box-13_1"  >我已阅读并同意相关服务条款和隐私政策</span>
            </div>
    </div>
    <script>
//1昵称
        function dear(){
            document.getElementsByClassName("pe")[0].style.display="inline-block";
            document.getElementsByClassName("pe1")[0].style.display="none";
            ico1.style.display="none";
            ico2.style.display="none";
            nickname.style.borderColor="#C0D0D8";
        }
        var nickname=document.getElementById("nicheng");
        var ico1=document.getElementById("ico1");
        var ico2=document.getElementsByClassName("ico2-1")[0];
        var tubiao2=document.getElementById("ico2");
        nickname.addEventListener("blur",function dear1(){
            var au=this.value;
           // console.log(au);
            var reg=/^[A-Za-z0-9_\-\u4e00-\u9fa5]{6,16}$/;
            var result=reg.test(au);
            //console.log(result);
            if(result==true){
               document.getElementsByClassName("pe")[0].style.display="none";
                nickname.style.borderColor="#C0D0D8";
                ico1.style.display="inline-block";
            }
            else{
                ico2.style.display="inline-block";
                nickname.style.borderColor="red";
               document.getElementsByClassName("pe1")[0].style.display="inline-block";
                document.getElementsByClassName("pe")[0].style.display="none";

            }
        })
     //2密码
        var passage1=document.getElementsByClassName("Passwordbox")[0];
        var mima1=document.getElementById("mima");
        var Passwordbox1=document.getElementsByClassName("Passwordbox1");
        var Passwordbox2=document.getElementsByClassName("Passwordbox2");
        var Passwordbox3=document.getElementsByClassName("Passwordbox3");
        function passage(){
            passage1.style.display="block";
            mima1.style.borderColor="#C0D0D8";
            Passwordbox2[0].style.color="#000";
            Passwordbox1[0].style.color="#000";
            document.getElementById("e-mark2").style.display="inline-block";
            document.getElementById("e-mark1").style.display="inline-block";
            document.getElementById("e-mark3").style.display="inline-block";
            //document.getElementById("Space").style.display="inline-block";
            document.getElementById("length").style.display="none";
            document.getElementById("Space").style.display="none";
            document.getElementById("error1").style.display="none";
            document.getElementById("error2").style.display="none";
            document.getElementById("error3").style.display="none";
        }
        mima1.addEventListener("blur",function dear1(){
            var passwordbox=mima1.value;
            var reg=/^[A-Za-z0-9_-]{6,16}$/;
           // console.log(passwordbox);
            var result=reg.test(passwordbox);
            //console.log(result);
            if(result){
                mima1.style.borderColor="#C0D0D8";
                //mima1.style.borderColor="red";
                console.log(result);
                document.getElementById("error1").style.display="inline-block";
                document.getElementById("error2").style.display="inline-block";
                document.getElementById("error3").style.display="inline-block";
                document.getElementById("e-mark1").style.display="none";
                document.getElementById("e-mark2").style.display="none";
                document.getElementById("e-mark3").style.display="none";
            }
            else{
                mima1.style.borderColor="red";
                Passwordbox2[0].style.color="red";
                Passwordbox1[0].style.color="red";
                document.getElementById("Space").style.display="inline-block";
                document.getElementById("e-mark2").style.display="none";
                document.getElementById("length").style.display="inline-block";
                document.getElementById("e-mark1").style.display="none";
                document.getElementById("error3").style.display="inline-block";
                document.getElementById("e-mark3").style.display="none";
                document.getElementById("error1").style.display="none";
                document.getElementById("error2").style.display="none";

            }
           })
        //确认密码
        var qrmi=document.getElementById("qrmm");
        var qr1=document.getElementById("qr1");
        var qr2=document.getElementById("qr2");
        var qrmmimg1=document.getElementById("qrmm-img1");
        var qrmmimg2=document.getElementById("qrmm-img2");
        function qrmm(){
            qr1.style.display="inline-block";
            qrmmimg1.style.display="none";
            qr2.style.display="none";
            qrmi.style.borderColor="#C0D0D8";
            qrmi.addEventListener("blur",function dear1(){
                var qrmi1=mima1.value;
                console.log(qrmi1);
                if( qrmi1==this.value){
                    qrmmimg1.style.display="inline-block";
                    qr1.style.display="none";
                    qrmi.style.borderColor="#C0D0D8";
                }

                else{
                    qrmi.style.borderColor="red";
                    qr2.style.display="inline-block";
                    qr1.style.display="none";
                }
        })}

        //手机号码
        var telphone=document.getElementById("tel");
        var box7a1=document.getElementById("box-7a");
        var tel1=document.getElementById("tel-1");
        var box71=document.getElementsByClassName("box-7-1")[0];
        function tel(){
            box7a1.style.display="inline-block";
            telphone.style.borderColor="#C0D0D8";
            tel1.style.display="none";
            box71.style.display="none";}
            telphone.addEventListener("blur",function(){
                var ipone=this.value;
              console.log(ipone);
                var reg3=/^0?(13|14|15|18)[0-9]{9}$/;
                var result3=reg3.test(ipone);
                console.log(result3);
            if(result3){
                tel1.style.display="inline-block";
                box7a1.style.display="none";
                telphone.style.borderColor="#C0D0D8";
            }
            else{
                telphone.style.borderColor="red";
                box71.style.display="inline-block";
                box7a1.style.display="none";
            }
        })
        var noteone=document.getElementsByClassName("note1")[0];
        function sms(){
            noteone.innerText="正在发送...";
}
            noteone.addEventListener("blur",function(){
                noteone.innerText="获取短信验证码";
            })
    var httpone=document.getElementById("http");
    var registerone=document.getElementsByClassName("register1")[0];
        function  http1(){
            registerone.style.borderColor="#69B946";
            registerone.style.color="#fff";
            registerone.style.backgroundColor="#69B946";
        }
//    httpone.addEventListener("submit",function(){
//        registerone.style.borderColor="#D0DAE3";
//        registerone.style.color="#888";
//        registerone.style.backgroundColor="#F4F9FD";
//    })
    </script>
</body>
</html>